<% include ../layout/oa_header.ejs %>

<section id="tutorial" class="ftco-section ftco-work">
	<div class="container-fluid">
		<div class="row justify-content-center mb-5 pb-5">
			<div class="col-md-7 text-center heading-section ftco-animate">
				<h2 class="mb-2">操作指南</h2>
				<span class="subheading">我们以视频的方式为大家提供帮助，方便大家快速了解OA的基本使用</span>
			</div>
		</div>
		<div class="row justify-content-center mb-5 pb-5">
			<% for(var i=0;i<dataList.length;i++){ %>
			<div class="col-md-4 ftco-animate">
				<div class="work-entry">
					<div class="img" style="background:url('/image/ed-31.jpg')">
						<div class="videoPlayerBg"></div>
						<div class="videoPlayerBtn" data-vid="<%- dataList[i].v_id %>" id="<%- dataList[i].v_url %>">
							<span class="icon icon-play">
						</div>
					</div>
					<div class="videoPlayerContent"><%- dataList[i].v_name %><div class="videoPlayerCount">
							播放量：<%- dataList[i].v_play_count %></div>
					</div>
				</div>
			</div>
			<% } %>
		</div>
	</div>
</section>


<!-- 视频框 https://e-d.oss-cn-beijing.aliyuncs.com/video/%E5%B8%A6%E6%82%A8%E4%BA%86%E8%A7%A3%E4%BB%80%E4%B9%88easy-D%E9%9B%86%E5%90%88%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6.mp4-->
<div class="popVideoPlayBox">
	<div class="popVideoPlayContent">
		<video id="my-video" class="video-js vjs-big-play-centered" controls style="width:100%;height:100%;">
			<source id="video_source"
				src=""
				type="video/mp4">
			<p class="vjs-no-js">
				要查看此视频，请启用JavaScript，并考虑升级到一个网页浏览器
				<a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
			</p>
		</video>
	</div>
	<div class="popVideoPlayClose"><i class="icon-close"></i></div>
</div>

<section class="ftco-section-parallax">
	<div class="parallax-img d-flex align-items-center">
		<div class="container">
			<div class="row d-flex justify-content-center">
				<div class="col-md-7 text-center heading-section heading-section-white ftco-animate">
					<h2>有什么疑问可以加入我们一起学习</h2>
					<p>免费开源项目，只为让开发更加便捷，如果你想了解更多或者想取得联系欢迎联系我们</p>
				</div>
			</div>
		</div>
	</div>
</section>
<style>
	.work-entry .img {
		height: 300px;
	}

	.videoPlayerBtn {
		font-size: 60px;
		color: #fff;
		text-align: center;
		width: 100px;
		height: 100px;
		cursor: pointer;
	}

	.videoPlayerBg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.videoPlayerBtn .videoPlayerBtnBorder {
		position: absolute;
		opacity: 0.6;
		width: 100px;
		height: 100px;
		z-index: 10;
	}

	.videoPlayerBtn span {
		position: absolute;
		opacity: 0.7;
		z-index: 20;
		top: 37%;
		left: 47%;
	}

	.videoPlayerBtn span:hover {
		opacity: 0.9;
	}

	.videoPlayerContent {
		width: 100%;
		height: 40px;
		font-size: 14px;
		box-sizing: border-box;
		line-height: 40px;
		color: #333;
		border-bottom: 1px solid #ddd;
	}

	.videoPlayerCount {
		float: right;
	}

	/*弹出视频公共样式*/

	.popVideoPlayBox {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		display: none;
		z-index: 9999;
		right: 0px;
		bottom: 0px;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popVideoPlayBox .popVideoPlayContent {
		width: 760px;
		height: 475px;
		background: #fff;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -250px;
		border-radius: 5px;
		margin-left: -380px;
	}

	.popVideoPlayBox .popVideoPlayClose {
		width: 50px;
		height: 50px;
		position: absolute;
		left: 50%;
		bottom: 8%;
		background: #fff;
		border: 1px solid #ccc;
		text-align: center;
		line-height: 50px;
		border-radius: 25px;
		cursor: pointer;
	}

	.popVideoPlayBox .popVideoPlayClose i {
		font-size: 28px;
		position: relative;
		top:5px;
	}

	.popVideoPlayBox .popVideoPlayClose:hover {
		background: #666;
		color: #fff;
	}
</style>
<% include ../layout/oa_footer.ejs %>
<script>
	$(".videoPlayerBtn").click(function () {

		var videoURL = $(this).attr("id");
		var vid = $(this).data("vid");
	
		//禁止滚动条
		var nowScrollTop = $(document).scrollTop();
		$(".popVideoPlayBox").css("top", nowScrollTop);
		$(document).on('scroll.unable', function (e) {
			$(document).scrollTop(nowScrollTop);
		})

		var myVideo = document.getElementsByTagName('video')[0];
		myVideo.src = videoURL;
		myVideo.play();
		$(".popVideoPlayBox").fadeIn(300);

		//调用下载数量更新接口
		HTTP.get("/user/updatePlayCount?v_id="+vid, (rs) => {})

	})

	$(".popVideoPlayClose").click(function () {
		//解放滚动条
		$(document).unbind("scroll.unable");
		$(".popVideoPlayBox").hide();
		var myVideo = document.getElementsByTagName('video')[0];
		myVideo.pause();

	})


</script>